<template>
  <div class="edit_main">
    <head-top head-title="编辑资料" goBack="true"></head-top>
    <ul class="ul_one">
      <li>
        <span>真实姓名：</span>
        <input ref="name" type="text" placeholder="请输入真实姓名" v-model.trim="realName">
      </li>
      <li>
        <span>我的昵称：</span>
        <input ref="nickname" type="text" placeholder="请输入昵称" v-model.trim="name">
      </li>
      <li class="li_sex">
        <span>我的性别：</span>
        <mt-radio
          align="right"
          v-model="sexValue"
          :options="sex">
        </mt-radio>
      </li>
      <li class="border-b0">
        <span>我的身份：</span>
        <mt-radio
          align="right"
          v-model="identityValue"
          :options="identity">
        </mt-radio>
      </li>
      <li class="notice">
        <div class="notice_list">
          业主：为所在小区业主</br>
          员工：为所在小区工作人员</br>
          都是：为既是小区业主也是小区工作人员</br>
        </div>
      </li>
    </ul>
    <ul class="ul_main">
      <li @click="goMyVillage">
        <div class="li_li">
          <p>我的小区：</p>
          <div class="li_icon">
            <span>{{village}}</span>
            <img src="../home/images/fanhui1@2x.png" alt="">
          </div>
        </div>
      </li>
      <li>
        <div class="li_li">
          <p>手机号码：</p>
          <input type="tel" placeholder="请输入手机号码" maxlength="11" v-model.trim="phoneNumber" autocomplete="on"
                 @keyup="editPhone">
        </div>
      </li>
      <li v-show="showCode">
        <div class="li_li">
          <p>验&nbsp;证 &nbsp;码：</p>
          <input class="code_input" type="number" placeholder="请输入验证码" v-model.trim="codeNumber" ref="code" maxlength="6">
          <button class="buttons" :disabled="time ==0 || time==60 ? false : true " ref="btn" @click="getCode()">
            <span v-show="sendMsgDisabled">{{time + 's后获取'}}</span>
            <span v-show="!sendMsgDisabled">{{msg}}</span>
          </button>
        </div>
      </li>
      <li>
        <div class="li_li">
          <p>我的邮箱：</p>
          <input type="email" placeholder="请输入邮箱" ref="youxiang" v-model="email">
        </div>
      </li>
    </ul>
    <div class="btn_row">
      <button @click="submitAll">
        <span>保存</span>
      </button>
    </div>
    <mt-popup
      v-model="villageShow"
      popup-transition="popup-fade" class="villageHeights">
      <div class="village">
        <p class="p">请选择小区</p>
        <div class="plot-wrapper">
          <div class="search">
            <div class="search-wrapper">
              <input type="text" placeholder="请输入小区的名称" v-model="keyword" @keyup.enter="search" @input="search">
              <span class="search-icon" @click="search"></span>
            </div>
          </div>
        </div>
      </div>
      <mt-index-list>
        <mt-index-section :index="index" v-for="(item,index) in data" :key="index">
          <div v-for="(list,index) in item" @click="goVillage(list)">
            <mt-cell :title="list.title"></mt-cell>
          </div>
        </mt-index-section>
      </mt-index-list>
    </mt-popup>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .edit_main {
    width: 100%;
    padding-top: 40px;
    // 弹窗样式
    .mint-popup {
      width: 85%;
      border-radius: 5px;
      .village {
        .p {
          font-size: 15px;
          text-align: center;
          line-height: 39px;
          border-bottom: 1px solid #d7d7d7;
        }
        .plot-wrapper {
          width: 100%;
          padding-top: 40px;
          background: #fff;
          .search {
            width: 100%;
            position: fixed;
            top: 40px;
            left: 0;
            background-color: #fff;
            text-align: center;
            height: 44px;
            line-height: 44px;
            .now-plot {
              padding-left: 10px;
              text-align: left;
              font-size: 15px;
              height: 40px;
              line-height: 40px;
              background-color: #D9D9D9;
            }
            .search-wrapper {
              display: inline-block;
              height: 30px;
              line-height: 30px;
              width: 92%;
              margin: 0 10px;
              border-radius: 4px;
              background-color: #e6e6e6;
              input {
                width: 118px;
                font-size: 14px;
                outline: none;
                border: none;
                background-color: #e6e6e6;
                &::-ms-input-placeholder {
                  text-align: center;
                }
                &::-webkit-input-placeholder {
                  text-align: center;
                }
              }
              .search-icon {
                display: inline-block;
                width: 17px;
                height: 17px;
                background-size: 17px 17px;
                background-repeat: no-repeat;
                @include bgimg('../../components/home/images/search');
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
    .villageHeights {
      width: 100%;
      height: 75%;
      .mint-indexlist {
        height: 78%;
      }
      .mint-indexlist-content {
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
      }
      .mint-cell-wrapper {
        background-size: 120% 0px;
      }
    }
    .ul_one {
      width: 100%;
      background: #fff;
      list-style: none;
      .mint-radiolist-label {
        padding: 0;
        span {
          font-size: 14px;
        }
        .mint-radio-label {
          margin-left: 2px;
        }
      }
      .mint-radiolist .mint-cell {
        float: right;
      }
      .mint-radio-core {
        margin-top: -2px;
      }
      .mint-cell {
        min-height: 44px;
      }
      .mint-radiolist-title {
        display: inline;
      }
      .mint-radiolist-label {
        margin-left: -30px;
      }
      .mint-cell:last-child {
        background-size: 100% 0;
      }
      .mint-cell-wrapper {
        background-size: 120% 0;
      }
      li {
        width: 100%;
        height: 44px;
        border-bottom: 1px solid #d7d7d7;
        line-height: 44px;
        clear: both;
        &.border-b0 {
          border-bottom: 1px solid #f3f3f3;
          clear: both;
          span {
            float: left;
          }
        }
        &.notice {
          padding: 5px 0 15px 10px;
          .notice_list {
            line-height: normal;
            height: auto;
            color: #999;
            float: left;
          }
        }
        span {
          font-size: 15px;
          /*float: left;*/
          margin-left: 10px;
          /*display: inline-block;*/
        }
        input {
          border: none;
          outline: none;
          color: #999999;
          font-size: 14px;
        }
      }
      .li_sex {
        span {
          float: left;
        }
      }
    }
    .ul_main {
      width: 100%;
      li {
        width: 100%;
        border-bottom: 1px solid #d7d7d7;
        height: 44px;
        .li_li {
          width: 100%;
          line-height: 44px;
          p {
            font-size: 15px;
            float: left;
            margin-left: 10px;
          }
          input {
            font-size: 14px;
            outline: none;
            border: none;
            color: #999999;
          }
          .code_input{
            width: 100px;
          }
          .li_icon {
            float: right;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 14px;
              float: left;
              margin-right: 10px;
              color: #999;
            }
            img {
              width: 10px;
              height: 17px;
              margin-right: 10px;
              display: inline-block;
              /*margin-top: 11px;*/
            }
          }
          .buttons {
            border-radius: 10px;
            background: #f2f2f2;
            text-align: center;
            color: #0078de;
            font-size: 12px;
            height: 35px;
            padding-right: 5px;
            outline: none;
            float: right;
            margin-right: 10px;
            margin-top: 4px;
          }
        }
      }
    }
    .btn_row {
      width: 100%;
      text-align: center;
      padding-bottom: 10px;
      button {
        width: 90%;
        height: 44px;
        background: #0078de;
        outline: none;
        border: none;
        border-radius: 5px;
        margin-top: 20px;
        span {
          font-size: 15px;
          color: #fff;
        }
      }
    }
  }

</style>
<script>
  import headTop from '../header/Header.vue'
  import {
    loadTitle,
    savePhoneName,
    saveTitle,
    saveVillageId
  } from '../../common/js/cache.js'
  import { Toast } from 'mint-ui'
  import { getPhoneCode, saveEditData, getMyInfo } from '../../api/my.js'
  import { getVillageLoad, searchKeyword } from '../../api/cityVillage.js'

  export default {
    name: 'EditData',
    data () {
      return {
        phoneNumber: '',
        oldPhone: '',
        codeNumber: '',
        name: '',
        realName: '',
        email: '',
        sexValue: 'Male',
        identityValue: 'User',
        msg: '获取验证码',
        showCode: false,
        repeatNumber: {
          type: Number
        },
        sex: [
          {
            label: '保密',
            value: 'Secret'
          },
          {
            label: '女',
            value: 'Female'
          },
          {
            label: '男',
            value: 'Male'
          }
        ],
        identity: [
          {
            label: '都是',
            value: 'UserWork'
          },
          {
            label: '员工',
            value: 'Work'
          },
          {
            label: '业主',
            value: 'User'
          }
        ],
        village: loadTitle(),
        villageShow: false,
        keyword: '',
        data: {},
        selectword: '',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false   // 按钮上的显示文本（false:显示为时间跳动的文本  true:显示为发送验证码）
      }
    },
    components: {
      headTop
    },
    created () {
      // 回显编辑资料数据
      this._getEditData()
    },
    methods: {
      goVillage (item) {
        this.village = item.title
        this.villageShow = false
        this.keyword = ''
        saveVillageId(item.id)
        saveTitle(item.title)
      },
      // 获取小区列表
      _getVillage () {
        getVillageLoad().then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      search () {
        searchKeyword(this.keyword).then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      toQRCode () {
        this.$router.push('/my/QRCode')
      },
      toMyLabel () {
        this.$router.push('/my/MyLabel')
      },
      goMyVillage () {
        this.villageShow = true
        this.keyword = ''
        this._getVillage()
      },
      //  获取验证码
      getCode () {
        if (this.phoneNumber.length !== 11 && (typeof this.phoneNumber) !== Number) {
          Toast({
            message: '手机号码格式不对',
            position: 'middle',
            duration: 1000
          })
          return
        } else {
          getPhoneCode(this.phoneNumber).then(res => {
            this.repeatNumber = res.code
            if (res.code === 400) {
              this.showCode = false
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              window.clearInterval(interval)
            }
          })
          let me = this
          me.sendMsgDisabled = true  // 点击时变成true 那么就是显示多少秒后获取
          let interval = window.setInterval(function () {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(interval)
            }
            me.msg = '重新获取'
          }, 1000)
        }
      },
      // 保存编辑资料
      submitAll () {
        if (!this.realName.length) {
          Toast({
            message: '真实姓名必填',
            position: 'middle',
            duration: 1000
          })
          return
        }
        if (!this.phoneNumber.length) {
          Toast({
            message: '电话号码必填',
            position: 'middle',
            duration: 1000
          })
          return
        }
        if (this.repeatNumber === 400) {
          Toast({
            message: '该手机号已被绑定',
            position: 'middle',
            duration: 1000
          })
          return
        }
        const phonename = {
          phone: this.phoneNumber,
          name: this.realName
        }
        saveEditData(this.name, this.realName, this.phoneNumber, this.sexValue, this.identityValue, this.codeNumber, this.email).then(res => {
          if (res.code === 200) {
            savePhoneName(phonename)
            Toast({
              message: res.data,
              position: 'middle',
              duration: 1500
            })
            this.$router.push('/My')
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 1500
            })
          }
        })
      },
      _getEditData () {
        getMyInfo().then(res => {
          this.name = res.data.name
          this.realName = res.data.real_name
          this.sexValue = res.data.sex
          this.phoneNumber = res.data.phone
          this.oldPhone = res.data.phone
          this.email = res.data.email
          this.identityValue = res.data.wx_role
        })
      },
      editPhone () {
        if (this.phoneNumber === this.oldPhone) {
          this.showCode = false
        } else {
          this.showCode = true
        }
      }
    }
  }
</script>
